<template>
  <view class="benben-flex-collapse">
    <slot />
  </view>
</template>
<script>
export default {
    name: 'benben-flex-collapse',
    emits:['change','activeItem','input','update:modelValue'],
    props: {
        value: {
            type: [String, Array],
            default: ''
        },
        modelValue: {
            type: [String, Array],
            default: ''
        },
        accordion: {
            // 是否开启手风琴效果
            type: [Boolean, String],
            default: false
        },
    },
    data() {
        return {}
    },
    computed: {
        // TODO 兼容 vue2 和 vue3
        dataValue() {
            let value = (typeof this.value === 'string' && this.value === '') ||
                (Array.isArray(this.value) && this.value.length === 0)
            let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
                (Array.isArray(this.modelValue) && this.modelValue.length === 0)
            if (value) {
                return this.modelValue
            }
            if (modelValue) {
                return this.value
            }

            return this.value
        }
    },
    watch: {
        dataValue(val) {
            this.setOpen(val)
        }
    },
    created() {
        this.childrens = []
        this.names = []
    },
    mounted() {
        this.$nextTick(()=>{
            this.setOpen(this.dataValue)
        })
    },
    methods: {
        setOpen(val) {
            let str = typeof val === 'string'
            let arr = Array.isArray(val)
            this.childrens.forEach((vm, index) => {
                if (str) {
                    if (val === vm.nameSync) {
                        if (!this.accordion) {
                            console.warn('accordion 属性为 false ,v-model 类型应该为 array')
                            return
                        }
                        vm.isOpen = true
                    }
                }
                if (arr) {
                    val.forEach(v => {
                        if (v === vm.nameSync) {
                            if (this.accordion) {
                                console.warn('accordion 属性为 true ,v-model 类型应该为 string')
                                return
                            }
                            vm.isOpen = true
                        }
                    })
                }
            })
            this.emit(val)
        },
        setAccordion(self) {
            if (!this.accordion) return
            this.childrens.forEach((vm, index) => {
                if (self !== vm) {
                    vm.isOpen = false
                }
            })
        },
        resize() {
            this.childrens.forEach((vm, index) => {
                // #ifndef APP-NVUE
                vm.getCollapseHeight()
                // #endif
                // #ifdef APP-NVUE
                vm.getNvueHwight()
                // #endif
            })
        },
        onChange(isOpen, self) {
            let activeItem = []

            if (this.accordion) {
                activeItem = isOpen ? self.nameSync : ''
            } else {
                this.childrens.forEach((vm, index) => {
                    if (vm.isOpen) {
                        activeItem.push(vm.nameSync)
                    }
                })
            }
            this.$emit('change', activeItem)
            this.emit(activeItem)
        },
        emit(val){
            this.$emit('input', val)
            this.$emit('update:modelValue', val)
        }
    }
 	}
 </script>
<style lang="scss" scoped>
.benben-flex-collapse {
  width:100%;
}
::v-deep .benben-collapse-item-active {
    transform: rotate(-180deg);
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
</style>
